
<template>
  <div>
    <div style="height:30px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>友情链接</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
    <el-tabs v-model="activeName"  @tab-click="handleClick">
    <el-tab-pane label="友情链接列表" name="1">
      <el-card shadow="never">
      <div
        style="margin-bottom:20px">
        <el-button
          type="primary"
          @click="$refs.show.open('add')">添加</el-button>
      </div>
      <Table
        :table-data="tableDate"
        :table-class="'table_title_left'"
        :table-columns="columns"
        :is-selection="true"
        :page-size="pageSize"
        :page-num="pageNum"
        :total="total"
        :show-img="true"
        @changePage="changePage"
        @editTable="editTable"
        @ok="getTableList()" />
    </el-card>
    </el-tab-pane>
    <el-tab-pane label="配置友情链接" name="2">
      <el-form ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      class="demo-ruleForm"
      style="width:100%">
      <el-form-item label="类型"
          prop="type">
          <el-select style="width: 100%;" v-model="ruleForm.type"
            placeholder="请选择类型">
            <el-option v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="rotationTime">
        <el-input v-model="ruleForm.rotationTime" placeholder="请输入轮播时间"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</el-card>
    <Modal ref="show" @ok="getTableList"></Modal>
  </div>
</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
import Table from './table.vue'
import Modal from './modal.vue'
export default {
  name: 'ActiveList',
  components: {
    Table,Modal
  },
  data() {
    return {
      ruleForm:{
        type:1,
        rotationTime:''
      },
      typeList:[
        {
          label:'手动',
          value:1
        },
        {
          label:'自动',
          value:2
        }
      ],
      rules:{
        type:[
          {required: true, message: '请选择类型', trigger: 'change' }
        ],
        rotationTime:[
          {required: true, message: '请输入轮播时间', trigger: 'blur' }
        ]
      },
      activeName:'1',
      pageNum: 1,
      pageSize: 10,
      total: 25,
      list: [],
      tableLoading: false,
      queryParam: {
        title: '',
      },
      columns: [
      {
          title: '名称',
          key: 'name',
          prop: 'name',
          align: 'left',
          modifiable: true,
          minwidth: '130',
          isShow: true,
          tooltip: false
        },
        {
          title: '链接',
          key: 'url',
          prop: 'url',
          align: 'left',
          modifiable: true,
          minwidth: '130',
          isShow: true,
          tooltip: false
        },
        {
          title: '类型',
          key: 'type',
          prop: 'type',
          align: 'left',
          minwidth: '180',
          modifiable: true,
          isShow: true,
          tooltip: false
        },
        {
          title: '操作',
          key: 'action',
          prop: 'action',
          fixed: 'right',
          minwidth: '180',
          align: 'center',
          modifiable: true,
          isShow: true,
          tooltip: false
        }
      ],
      tableDate: [],
      pageArr: []
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    handleClick(tab, event) {
        if(tab.name == '1'){
          // this.tableData = 
        }
      },
    searchForm() {
      this.pageNum = 1
      this.getTableList()
    },
    /**
     * @description: 获取数据列表
     * @param {type}
     * @return:
     */
    getTableList() {
      this.tableLoading = true
      REQUEST_LIST.REQUST_FCN(
        'PARTYLIST',
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        true
      ).then(res => {
        this.tableDate = res.data.linkList
        this.ruleForm = res.data.friendshipLinkConf
        this.total = parseInt(res.data.total)
        this.tableLoading = false
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          REQUEST_LIST.REQUST_FCN('PARTYCONFIG',{
            id: this.ruleForm.id,
            type:this.ruleForm.type,
            rotationTime:this.ruleForm.rotationTime,
          }, true).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTableList()
        }
      })  
           
        }
      })
    },
    /**
     * @description: 重置
     * @param {type}
     * @return:
     */
    reset() {
      this.pageNum = 1
      this.queryParam.title = ''
      this.queryParam.type = 1
      this.getTableList()
    },
    /**
     * @description: 翻页函数
     * @page {number}
     * @pageSize {number}
     * @return:
     */
    changePage(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
      this.getTableList()
    },
    editTable(e) {
      this.$refs.show.open('edit',e)
    }
  }
}
</script>
